<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站留言与回复系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #eef0ff;
            --secondary: #6c757d;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #23c16b;
            --danger: #e53e3e;
            --border: #e9ecef;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
            --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            padding: 30px 0;
        }
        
        .container {
            max-width: 1000px;
        }
        
        .page-title {
            margin-bottom: 2.5rem;
            color: var(--dark);
            font-weight: 700;
            text-align: center;
        }
        
        .comment-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 3rem;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .comment-section:hover {
            box-shadow: var(--shadow-hover);
        }
        
        .section-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .section-title i {
            margin-right: 10px;
            font-size: 1.5rem;
        }
        
        .section-description {
            color: var(--secondary);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }
        
        /* 基础样式 */
        .comment-item, .reply-item {
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
        }
        
        .comment-item:last-child, .reply-item:last-child {
            border-bottom: none;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .comment-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        
        .comment-avatar:hover {
            border-color: var(--primary);
        }
        
        .comment-author {
            font-weight: 600;
            margin-bottom: 2px;
            display: inline-block;
            transition: color 0.2s;
        }
        
        .comment-author:hover {
            color: var(--primary);
        }
        
        .comment-meta {
            color: var(--secondary);
            font-size: 0.85rem;
        }
        
        .comment-content {
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }
        
        /* 互动按钮样式 */
        .comment-actions {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        
        .comment-action {
            color: var(--secondary);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: color 0.2s, transform 0.2s;
            padding: 2px 5px;
            border-radius: 4px;
        }
        
        .comment-action:hover {
            color: var(--primary);
            transform: translateY(-1px);
        }
        
        .comment-action i {
            margin-right: 5px;
            font-size: 0.9rem;
        }
        
        .comment-action.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 带媒体内容的留言 */
        .comment-media {
            margin: 0.75rem 0;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .comment-images {
            display: flex;
            gap: 8px;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }
        
        .comment-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .comment-image:hover {
            transform: scale(1.03);
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        /* 回复系统样式 */
        .comment-replies {
            margin-left: 56px;
            margin-top: 1rem;
            padding-top: 0.5rem;
        }
        
        .reply-item {
            padding: 0.75rem 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .reply-form {
            margin-top: 1rem;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 嵌套式回复 */
        .nested-replies {
            position: relative;
            padding-left: 2rem;
        }
        
        .nested-replies::before {
            content: '';
            position: absolute;
            left: 22px;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: var(--border);
        }
        
        /* 带点赞和热度的样式 */
        .comment-with-stats {
            display: flex;
        }
        
        .comment-stats {
            margin-right: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .comment-votes {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-bottom: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .comment-votes:hover {
            background-color: var(--primary-light);
            color: var(--primary);
            transform: scale(1.1);
        }
        
        .comment-hot {
            background-color: rgba(251, 146, 60, 0.1);
            color: #f59e0b;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* 留言输入框样式 */
        .comment-input {
            margin-top: 1.5rem;
        }
        
        .comment-input textarea {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 12px;
            resize: none;
            margin-bottom: 10px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .comment-input textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }
        
        .input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .input-tools {
            display: flex;
            gap: 1rem;
        }
        
        .input-tool {
            color: var(--secondary);
            cursor: pointer;
            transition: color 0.2s, transform 0.2s;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .input-tool:hover {
            color: var(--primary);
            background-color: var(--primary-light);
            transform: rotate(5deg);
        }
        
        /* 通知和徽章 */
        .verified-badge {
            color: var(--primary);
            margin-left: 5px;
            font-size: 0.9rem;
        }
        
        .moderator-badge {
            background-color: rgba(236, 72, 153, 0.1);
            color: #ec4899;
            font-size: 0.7rem;
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 5px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .comment-replies {
                margin-left: 0;
                padding-left: 1rem;
                border-left: 2px solid var(--border);
            }
            
            .nested-replies {
                padding-left: 1rem;
            }
            
            .comment-images {
                flex-wrap: wrap;
            }
            
            .comment-image {
                width: 80px;
                height: 80px;
            }
            
            .comment-actions {
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">社交网站留言与回复系统</h1>
        
        <!-- 1. 基础留言与回复系统 -->
        <div class="comment-section">
            <h3 class="section-title">
                <i class="fas fa-comment"></i>
                基础留言与回复系统
            </h3>
            <p class="section-description">标准的留言结构，包含用户信息、内容和互动功能，支持多层回复。</p>
            
            <div class="comments-list">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">张明
                                <i class="fas fa-check-circle verified-badge" title="已认证用户"></i>
                            </div>
                            <div class="comment-meta">今天 14:32 · 来自 网页版</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        这个新功能太赞了！我期待很久了，终于上线了，使用起来很流畅，推荐大家都试试。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn">
                            <i class="far fa-thumbs-up"></i> 点赞 (24)
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                        <div class="comment-action">
                            <i class="far fa-bookmark"></i> 收藏
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="comment-replies">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">李华</div>
                                    <div class="comment-meta">今天 14:45 · 回复 张明</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                确实不错，我也觉得这个功能很实用，解决了之前的很多麻烦。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (5)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">王芳</div>
                                    <div class="comment-meta">今天 15:12 · 回复 张明</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                请问这个功能在哪里可以找到？我怎么没看到入口呢？
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (2)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                            
                            <!-- 嵌套回复 -->
                            <div class="nested-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="comment-avatar">
                                        <div>
                                            <div class="comment-author">张明</div>
                                            <div class="comment-meta">今天 15:20 · 回复 王芳</div>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        @王芳 在首页右上角的菜单里，有个"新功能体验"的入口，点击就能看到了。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-thumbs-up"></i> 点赞 (1)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">赵伟
                                <span class="moderator-badge">版主</span>
                            </div>
                            <div class="comment-meta">今天 13:15 · 来自 手机客户端</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        大家在使用新功能时遇到任何问题，都可以在这里反馈，我们会及时处理和回复。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn">
                            <i class="far fa-thumbs-up"></i> 点赞 (37)
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复 (8)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言输入框 -->
            <div class="comment-input">
                <textarea rows="3" placeholder="写下你的留言..."></textarea>
                <div class="input-actions">
                    <div class="input-tools">
                        <div class="input-tool" title="添加图片">
                            <i class="far fa-image"></i>
                        </div>
                        <div class="input-tool" title="表情">
                            <i class="far fa-smile"></i>
                        </div>
                        <div class="input-tool" title="@提及">
                            <i class="far fa-at"></i>
                        </div>
                        <div class="input-tool" title="插入链接">
                            <i class="fas fa-link"></i>
                        </div>
                    </div>
                    <button class="btn btn-primary">发布留言</button>
                </div>
            </div>
        </div>
        
        <!-- 2. 带媒体内容的留言与回复 -->
        <div class="comment-section">
            <h3 class="section-title">
                <i class="fas fa-images"></i>
                带媒体内容的留言与回复
            </h3>
            <p class="section-description">支持图片、视频等媒体内容展示的留言系统，适合分享生活瞬间和作品。</p>
            
            <div class="comments-list">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">陈静</div>
                            <div class="comment-meta">昨天 09:21 · 来自 手机客户端</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        周末去了这个新开的咖啡馆，环境真的很棒，推荐给大家！咖啡的味道也很正宗。
                    </div>
                    <div class="comment-images">
                        <img src="https://picsum.photos/400/300?random=10" alt="咖啡馆环境照片" class="comment-image">
                        <img src="https://picsum.photos/400/300?random=11" alt="咖啡照片" class="comment-image">
                        <img src="https://picsum.photos/400/300?random=12" alt="甜点照片" class="comment-image">
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn">
                            <i class="far fa-thumbs-up"></i> 点赞 (89)
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复 (12)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="comment-replies">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">刘强</div>
                                    <div class="comment-meta">昨天 10:05 · 回复 陈静</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                这家咖啡馆看起来很不错，请问具体位置在哪里？周末想去看看。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (15)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">陈静</div>
                                    <div class="comment-meta">昨天 10:30 · 回复 刘强</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                @刘强 在市中心广场旁边的文创园内，很好找的，门口有个很大的咖啡杯雕塑。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (7)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言输入框 -->
            <div class="comment-input">
                <textarea rows="3" placeholder="分享你的想法和图片..."></textarea>
                <div class="input-actions">
                    <div class="input-tools">
                        <div class="input-tool" title="添加图片">
                            <i class="far fa-image"></i>
                        </div>
                        <div class="input-tool" title="表情">
                            <i class="far fa-smile"></i>
                        </div>
                        <div class="input-tool" title="@提及">
                            <i class="far fa-at"></i>
                        </div>
                    </div>
                    <button class="btn btn-primary">发布留言</button>
                </div>
            </div>
        </div>
        
        <!-- 3. 带点赞和热度的留言与回复 -->
        <div class="comment-section">
            <h3 class="section-title">
                <i class="fas fa-fire"></i>
                带点赞和热度的留言与回复
            </h3>
            <p class="section-description">突出显示点赞数和热门程度的留言系统，适合内容社区和论坛。</p>
            
            <div class="comments-list">
                <div class="comment-item">
                    <div class="comment-with-stats">
                        <div class="comment-stats">
                            <div class="comment-votes like-btn">156</div>
                            <div class="comment-hot">热门</div>
                        </div>
                        <div class="comment-main">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=7" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">黄小明</div>
                                    <div class="comment-meta">1周前 · 来自 手机客户端</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                分享一个我总结的学习方法，亲测有效：每天坚持学习30分钟，比一次性学习3小时效果好得多。关键在于坚持和重复，形成习惯后就不会觉得困难了。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 赞同
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复 (42)
                                </div>
                                <div class="comment-action">
                                    <i class="far fa-bookmark"></i> 收藏
                                </div>
                            </div>
                            
                            <!-- 热门回复 -->
                            <div class="comment-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <img src="https://picsum.photos/200/200?random=8" alt="用户头像" class="comment-avatar">
                                        <div>
                                            <div class="comment-author">朱琳</div>
                                            <div class="comment-meta">6天前 · 回复 黄小明</div>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        非常赞同！我也用类似的方法，把大目标分解成小任务，每天完成一点点，积累起来效果惊人。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-thumbs-up"></i> 点赞 (67)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-with-stats">
                        <div class="comment-stats">
                            <div class="comment-votes like-btn">89</div>
                        </div>
                        <div class="comment-main">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=9" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">马军</div>
                                    <div class="comment-meta">5天前 · 来自 网页版</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                我补充一点：学习时一定要做笔记，好记性不如烂笔头。而且定期回顾笔记比不断学习新知识更重要，这是我多年的学习经验。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 赞同
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复 (18)
                                </div>
                                <div class="comment-action">
                                    <i class="far fa-bookmark"></i> 收藏
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 4. 嵌套式深度回复系统 -->
        <div class="comment-section">
            <h3 class="section-title">
                <i class="fas fa-sort-numeric-down"></i>
                嵌套式深度回复系统
            </h3>
            <p class="section-description">支持多层级嵌套回复，通过连接线清晰展示讨论的上下文关系，适合深度交流。</p>
            
            <div class="comments-list">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/200/200?random=10" alt="用户头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">林小红</div>
                            <div class="comment-meta">5天前 · 来自 网页版</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        有没有人推荐一些适合初学者的编程书籍？最近想入门编程，但不知道从哪本书开始看起。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn">
                            <i class="far fa-thumbs-up"></i> 点赞 (76)
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复 (15)
                        </div>
                    </div>
                    
                    <!-- 第一层回复 -->
                    <div class="nested-replies">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">郑华</div>
                                    <div class="comment-meta">4天前 · 回复 林小红</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                我推荐《Python编程：从入门到实践》，这本书非常适合初学者，内容浅显易懂，还有很多实践项目。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (42)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                            
                            <!-- 第二层回复 -->
                            <div class="nested-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <img src="https://picsum.photos/200/200?random=12" alt="用户头像" class="comment-avatar">
                                        <div>
                                            <div class="comment-author">吴天</div>
                                            <div class="comment-meta">4天前 · 回复 郑华</div>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        这本书确实不错，我也是看这本入门的，里面的项目很有趣，能激发学习兴趣。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-thumbs-up"></i> 点赞 (12)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="comment-avatar">
                                <div>
                                    <div class="comment-author">吴强</div>
                                    <div class="comment-meta">4天前 · 回复 林小红</div>
                                </div>
                            </div>
                            <div class="comment-content">
                                如果想学习JavaScript的话，《JavaScript高级程序设计》是一本经典教材，不过可能有点难度，适合有一点基础后再看。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-btn">
                                    <i class="far fa-thumbs-up"></i> 点赞 (28)
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复 (3)
                                </div>
                            </div>
                            
                            <!-- 第二层回复 -->
                            <div class="nested-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <img src="https://picsum.photos/200/200?random=10" alt="用户头像" class="comment-avatar">
                                        <div>
                                            <div class="comment-author">林小红</div>
                                            <div class="comment-meta">3天前 · 回复 吴强</div>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        谢谢推荐！我确实对前端开发也很感兴趣，等我有一定基础后会去看这本书的。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-thumbs-up"></i> 点赞 (7)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                    
                                    <!-- 第三层回复 -->
                                    <div class="nested-replies">
                                        <div class="reply-item">
                                            <div class="comment-header">
                                                <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="comment-avatar">
                                                <div>
                                                    <div class="comment-author">吴强</div>
                                                    <div class="comment-meta">3天前 · 回复 林小红</div>
                                                </div>
                                            </div>
                                            <div class="comment-content">
                                                不客气，如果有编程基础问题也可以问我，很乐意帮忙。
                                            </div>
                                            <div class="comment-actions">
                                                <div class="comment-action like-btn">
                                                    <i class="far fa-thumbs-up"></i> 点赞 (3)
                                                </div>
                                                <div class="comment-action reply-btn">
                                                    <i class="far fa-comment"></i> 回复
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 回复按钮点击事件
        document.querySelectorAll('.reply-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 找到最近的评论项
                const commentItem = this.closest('.comment-item, .reply-item');
                
                // 检查是否已经有回复框
                let replyInput = commentItem.querySelector('.reply-form');
                if (replyInput) {
                    // 如果已有回复框，则聚焦
                    replyInput.querySelector('textarea').focus();
                    return;
                }
                
                // 获取被回复的用户名
                const authorName = commentItem.querySelector('.comment-author').textContent.trim();
                
                // 创建回复框
                const inputHtml = `
                    <div class="comment-input reply-form">
                        <textarea rows="2" placeholder="回复 @${authorName}..."></textarea>
                        <div class="input-actions">
                            <div class="input-tools">
                                <div class="input-tool" title="表情">
                                    <i class="far fa-smile"></i>
                                </div>
                                <div class="input-tool" title="添加图片">
                                    <i class="far fa-image"></i>
                                </div>
                            </div>
                            <div>
                                <button class="btn btn-secondary me-2 cancel-reply">取消</button>
                                <button class="btn btn-primary submit-reply">回复</button>
                            </div>
                        </div>
                    </div>
                `;
                
                // 确定插入位置：如果有回复列表，插入到回复列表之前，否则插入到评论动作之后
                const repliesContainer = commentItem.querySelector('.comment-replies, .nested-replies');
                if (repliesContainer) {
                    repliesContainer.insertAdjacentHTML('beforebegin', inputHtml);
                } else {
                    this.closest('.comment-actions').insertAdjacentHTML('afterend', inputHtml);
                }
                
                // 聚焦到文本框
                const textarea = commentItem.querySelector('.reply-form textarea');
                textarea.focus();
                
                // 取消回复按钮事件
                commentItem.querySelector('.cancel-reply').addEventListener('click', function() {
                    commentItem.querySelector('.reply-form').remove();
                });
                
                // 提交回复按钮事件
                commentItem.querySelector('.submit-reply').addEventListener('click', function() {
                    const replyText = textarea.value.trim();
                    if (replyText) {
                        // 模拟提交回复
                        alert(`回复成功: ${replyText}`);
                        commentItem.querySelector('.reply-form').remove();
                        
                        // 这里可以添加实际提交回复的逻辑
                    } else {
                        alert('回复内容不能为空');
                    }
                });
            });
        });
        
        // 点赞按钮交互
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 处理普通点赞按钮
                if (this.querySelector('i')) {
                    const icon = this.querySelector('i');
                    let countText = this.textContent.trim();
                    let countMatch = countText.match(/\d+/);
                    
                    if (countMatch) {
                        let count = parseInt(countMatch[0]);
                        if (icon.classList.contains('far')) {
                            // 点赞
                            icon.classList.remove('far');
                            icon.classList.add('fas', 'text-primary');
                            this.innerHTML = `<i class="fas fa-thumbs-up text-primary"></i> 点赞 (${count + 1})`;
                        } else {
                            // 取消点赞
                            icon.classList.remove('fas', 'text-primary');
                            icon.classList.add('far');
                            this.innerHTML = `<i class="far fa-thumbs-up"></i> 点赞 (${count - 1})`;
                        }
                    }
                } else {
                    // 处理投票数按钮（带热度的样式）
                    let count = parseInt(this.textContent.trim());
                    if (!this.classList.contains('active')) {
                        this.classList.add('active', 'text-primary');
                        this.textContent = count + 1;
                    } else {
                        this.classList.remove('active', 'text-primary');
                        this.textContent = count - 1;
                    }
                }
            });
        });
    </script>
</body>
</html>
    
